<template>
	<view class="PayList" :style="'background-Image: url('+ homebgc +');'">
		<view class="top"></view>
		<view class="left" @click="NavLeft"><text class="tn-icon-left"
				style="font-size: 35rpx;font-weight: bold;"></text></view>
		<view class="user">
			<view class="avatar">
				<image :src="userInfo.avatar?url+userInfo.avatar:''" mode="" style="width: 128rpx;height: 128rpx;border-radius: 50%;"></image>
			</view>
			<view class="right">
				<view class="title">{{userInfo.name}}</view>
				<view class="time">
					{{userInfo.member_info.member_status==1?`已拥有VIP服务 ${userInfo.member_info.member_expire_date} 到期`:'您还未开通会员权限！'}}
				</view>
			</view>
		</view>
		<view class="pay">
			<image src="@/static/image/z.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
			<view>支付记录</view>
		</view>
		<view class="payList">
			<view class="box" v-for="(item,index) in paylist" :key="index">
				<view class="top">
					<view class="lef">充值VIP会员 1 年</view>
					<view class="rig">充值 {{item.money}} 元</view>
				</view>
				<view class="bom">{{item.create_datetime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetPayList } from "@/api/index.js"
	export default {
	
		data() {
			return {
				homebgc: this.$websiteUrl + 'static/web_files/Home_bj.svg',
				url: this.$websiteUrl,
				paylist: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		mounted() {
			this.getpayList()
		},
		methods: {
			async getpayList(){
				const data ={
					page: 1,
					limit: 999
				}
				const res = await GetPayList(data)
				if(res.code==2000){
					 this.paylist = res.data
				}
			},
			NavLeft() {
				const data = {
					index: 3
				}
				const objStr = encodeURIComponent(JSON.stringify(data))
				wx.reLaunch({
					url: `/pages/index/index?userInfo=${objStr}`
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.PayList {
		position: relative;
		padding-top: 70rpx;
		height: 100vh;
		overflow: hidden;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		padding: 0 48rpx;

		.top {
			height: 88rpx;
		}

		.left {
			display: flex;
			align-items: center;
			height: 88rpx;
			margin-left: -30rpx;
		}

		.user {
			display: flex;
			align-items: center;
			height: 128rpx;
			margin: 40rpx 0;

			// background-color: #85e9ff;
			.avatar {
				margin-right: 24rpx;
			}

			.right {
				font-weight: 400;
				.title {
					font-size: 40rpx;
					color: #333333;
					margin-bottom: 6rpx;
				}

				.time {
					font-size: 22rpx;
					color: #2D3142;
				}
			}
		}

		.pay {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 176rpx;
			height: 176rpx;
			background-color: #fff;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #2D3142;
			margin-bottom: 40rpx;
		}

		.payList {
			height: calc(100vh - 640rpx);
			// background-color: #a2b8ff;
			overflow-y:auto;

			.box {
				height: 124rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx 40rpx;
				margin-bottom: 24rpx;

				.top {
					display: flex;
					justify-content: space-between;
					height: 40rpx;
					margin-bottom: 17rpx;

					.lef {
						font-weight: 600;
						font-size: 28rpx;
						color: #2D3142;
					}

					.rig {
						font-weight: 400;
						font-size: 28rpx;
						color: #FF5533;
					}
				}

				.bom {
					font-weight: 400;
					font-size: 24rpx;
					color: #818AA6;
				}
			}
		}
	}
</style>